<template>
	<view>
		<view class="container">
			<view class="uni-segmentted-control">
				<uni-segmented-control :current="current" :values="items.map(v=>v.name)" @clickItem="onClickItem" style-type="text"
				 active-color="#ff00ff"></uni-segmented-control>
			</view>
			<view>
				<view class="content">
					<view v-show="current === 0">
						<view class="text-center row" style="display: flex;flex-wrap: wrap;">
							<navigator class="col" url="../list/list" open-type="navigate">我的1</navigator>
							<navigator class="col" url="../list/list" open-type="navigate">我的2</navigator>
							<navigator class="col" url="../list/list" open-type="navigate">我的3</navigator>
							<navigator class="col" url="../list/list" open-type="navigate">我的4</navigator>
						</view>
						<view class="row">
							<view class="col-4 text-center bg-primary rounded" style="height: 100rpx;">
								<image src="../../static/logo.png" class="img-responsive w-50 h-50"></image>
							</view>
							<view style="height: 100rpx;" class="col-8 text-center bg-danger rounded">
								456
							</view>
							<view style="height: 100rpx;" class="bg-info text-center col-8 rounded">
								789
							</view>
							<view style="height: 100rpx;" class="col-4 bg-success text-capitalize rounded">
								0
							</view>
							<view style="height: 100rpx;" class="bg-secondary col-6 rounded">
								123
							</view>
							<view style="height: 100rpx;" class="bg-dark col-6 rounded">
								3456
							</view>
						</view>
						<view class="hr">

						</view>
					</view>
					<view v-show="current === 1">
						<view class="form-group">
							<text>姓名</text>
							<input type="text" v-model="user.name" name="name" class="form-control" placeholder="姓名" />
						</view>
						<view class="form-group">
							<text>性别</text>
							<input type="text" value="" class="form-control" placeholder="性别" />
						</view>
						<view class="form-group">
							<view>选择</view>
							<view class="checkbox">
								<label>
									<checkbox /><text>123</text>
								</label>
								<label>
									<checkbox /><text>123</text>
								</label>
							</view>
						</view>
						<view class="form-group">
							<view>单选</view>
							<view class="radio">
								<radio-group name="radio">
									<label>
										<radio value="1" /><text>1</text>
									</label>
									<label>
										<radio value="2" /><text>2</text>
									</label>
								</radio-group>
							</view>
						</view>
						<view class="form-group">
							<view>数字输入</view>
							<view>
							</view>
						</view>

						<button class="btn btn-success btn-block" :disabled="btnDisabled" @click="test">测试token--get</button>
						<view class="glyphicon glyphicon-edit"></view>
					</view>
					<view v-show="current === 2">
						<image src="/static/logo.png" class="img-responsive img-circle icon-size-128" style="margin: 0 auto;"></image>

					</view>
				</view>
			</view>
			<view style="margin-top: 10rpx;">
				<button class="btn btn-block btn-warning" @click="goList()">
					<label class="glyphicon glyphicon-link"></label>
				</button>
			</view>
		</view>
	</view>
</template>
<script>
	import uniSegmentedControl from '../../components/uni-segmented-control/uni-segmented-control.vue'
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				title: 'Hello',
				user: null,
				btnDisabled: false,
				items: [{
					name: '1'
				}, {
					name: '2'
				}, {
					name: '3'
				}],
				current: 1
			}
		},
		onLoad() {},
		methods: {
			test() {
				this.btnDisabled = true;
				this.$request.ajaxPro({
					url: this.$api.testUrl,
					method: 'get',
					data: {
						name: this.user.name || '闻品高'
					},
					isShowLoad: true
				}).then((res) => {
					if (res.status) {
						uni.showModal({
							showCancel: false,
							title: '信息',
							content: res.msg
						})
					}
					this.btnDisabled = false;
				}, (err) => {
					this.btnDisabled = false;
				});

			},
			demo() {
				let t = this;
				uni.showToast({
					title: '哈哈哈😂',
					icon: 'none'
				});
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			goList() {
				uni.navigateTo({
					url: '../list1/list1'
				})
			}
		},
		created() {
			this.user = getApp().globalData.user;
		}
	}
</script>
<style>
	.uni-segmentted-control {
		width: 50%;
		margin: 0 auto;
	}
</style>
